<div class="title-container">
  <h1 mat-dialog-title>Insert New Node</h1>
  <button
    mat-button
    class="top-button"
    color="accent"
    (click)="onNoClick()"
    routerLink="/server/{{ server.id }}/preferences"
  >
    Go to template preferences
  </button>
</div>
<div mat-dialog-content class="content">
  <div class="title-container">
    <h6>Template</h6>
  </div>
  <mat-form-field class="form-field" floatPlaceholder="never">
    <input matInput placeholder="Search by name" [(ngModel)]="searchText" [ngModelOptions]="{ standalone: true }" />
  </mat-form-field>
  <mat-form-field class="form-field">
    <mat-select
      [ngModelOptions]="{ standalone: true }"
      placeholder="Filter templates by type"
      (selectionChange)="filterTemplates($event)"
      [(ngModel)]="selectedType"
    >
      <mat-option *ngFor="let type of templateTypes" [value]="type">
        {{ type }}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field class="form-field">
    <mat-select
      [ngModelOptions]="{ standalone: true }"
      placeholder="Choose template"
      (selectionChange)="chooseTemplate($event)"
      [(ngModel)]="selectedTemplate"
    >
      <mat-option *ngFor="let template of filteredTemplates | templatefilter: searchText" [value]="template">
        {{ template.name }}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <div class="title-container">
    <h6>Configuration</h6>
  </div>
  <form [formGroup]="configurationForm">
    <!-- <mat-form-field class="form-field">
      <input type="text" matInput formControlName="name" placeholder="Enter name (default is taken from template)" />
    </mat-form-field> -->
    <mat-form-field class="form-field">
      <input
        type="number"
        matInput
        formControlName="numberOfNodes"
        placeholder="Enter number of nodes (default value is 1)"
      />
    </mat-form-field>
  </form>
  <mat-select *ngIf="selectedTemplate" placeholder="Choose server for node" [(value)]="selectedTemplate.compute_id">
    <mat-option *ngFor="let type of nodeServers" [value]="type">
      {{ type }}
    </mat-option>
  </mat-select>

  <div class="title-container">
    <h6>Position</h6>
  </div>
  <form [formGroup]="positionForm">
    Left:&nbsp;
    <mat-form-field>
      <input matInput type="number" formControlName="left" />
    </mat-form-field>
    Top:&nbsp;
    <mat-form-field>
      <input matInput type="number" formControlName="top" />
    </mat-form-field>
  </form>
</div>
<div mat-dialog-actions align="end">
  <button mat-button (click)="onNoClick()" tabindex="-1" color="accent">Close</button>
  <button class="addButton" mat-button (click)="onAddClick()" tabindex="2" mat-raised-button color="primary">
    Add
  </button>
</div>
